<script setup lang="ts">
import { ref, onMounted } from "vue"
const defaultImgUrl = ref("")
const imgList: string[] = [
    "https://img2.baidu.com/it/u=3029837478,1144772205&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
    "https://img2.baidu.com/it/u=3702685885,4113095768&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
    "https://img0.baidu.com/it/u=1418738675,3584636760&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
]
// 切换图片
const changeImage = () => {
    defaultImgUrl.value = imgList[~~(Math.random() * imgList.length)]
}
onMounted(() => {
    changeImage()
})
</script>

<template>
    <!-- 数据驱动视图更新 鸿蒙 小程序 Vue React Angular -->
    <div class="container">
        <!-- v-bind: <=> : -->
        <img v-bind:src="defaultImgUrl" />
        <img :src="defaultImgUrl" /><br>
        <button @click="changeImage">切换图片</button>
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    text-align: center;
    margin: 100px auto;
}

.container img {
    width: 300px;
    height: 300px;
}
</style>
